<script setup lang="ts">
import TEditor from '@/common/TEditor/TEditor.vue'
import { useOperate } from '@/stores/operate'
import HyForm from '@/common/hy-form/src/HyForm.vue'
import { IFormItem } from '@/common/hy-form'
import { ElMessageBox } from 'element-plus'
import {
  addNotice,
  delNotice,
  delNoticeBatch,
  editNotice
} from '@/service/api/sys/village/notice'

const Router = useRouter()
const operateState = useOperate() // 操作仓库
const form = ref({ ...operateState.form }) // 当前表单
const type = ref(operateState.type) // 当前表单类型
const itemStyle = {
  marginRight: '15px',
  display: 'flex',
  flexDirection: 'column'
} // 表单基础样式
const disabled = computed(() => {
  return type.value === 1
}) // 判断当前是否可以编辑
const title = operateState.$state.typeObj[type.value] // 标题
const formProps = ref<Array<IFormItem>>([
  {
    type: 'input',
    field: 'title',
    label: '通知标题',
    otherOptions: {
      disabled: disabled
    }
  },
  {
    type: 'slot',
    field: 'content',
    label: '通知内容',
    slotName: `content`
  },
  {
    type: 'radio',
    field: 'isScroll',
    label: '滚动播放',
    otherOptions: {
      disabled: disabled
    },
    options: [
      {
        value: true,
        label: '是'
      },
      {
        value: false,
        label: '否'
      }
    ]
  }
]) // 表单配置项

// 富文本编译器内容改变则改变form的content内容
const getContent = (value: String) => {
  form.value.content = value
}

// 更新数据
const updateForm = (value: any) => {
  form.value = value
}

// 保存方法
const saveUser = () => {
  ElMessageBox.confirm(`确认${title}?`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        switch (type.value) {
          case 2:
            // 新增
            await addNotice(form.value)
            break
          case 3:
            // 编辑
            await editNotice(form.value)
            break
          case 4:
            // 删除
            await delNotice(form.value)
            break
          case 5:
            // 批量删除
            await delNoticeBatch({ ids: form.value.ids + '' })
            break
          default:
            ElMessage({
              type: 'warning',
              message: `${title}错误!`
            })
            // 其他
            break
        }
        ElMessage({
          type: 'success',
          message: `${title}成功, 稍后返回!`
        })
        setTimeout(() => {
          Router.back()
        }, 1000)
      } catch {
        ElMessage({
          type: 'error',
          message: `${title}失败, 请重试!`
        })
      }
    })
    .catch(() => {})
}
console.log(form.value)
</script>

<template>
  <div class="flex flex-col">
    <div v-if="type === 4 || type === 5">是否删除当前公告</div>
    <hy-form
      v-else
      :model-value="form"
      :formItems="formProps"
      labelWidth="auto"
      :colLayout="{ xl: 1 }"
      :itemStyle="itemStyle"
      @update:modelValue="updateForm"
    >
      <template #content>
        <TEditor
          ref="editor"
          :value="form.content"
          :disabled="disabled"
          @getContent="getContent"
          class="w-full"
        />
      </template>
    </hy-form>
    <div class="mt-7 flex justify-center">
      <el-button type="primary" class="button_default" @click="Router.back()"
        >关闭</el-button
      >
      <el-button
        v-if="!disabled"
        :type="type === 4 || type === 5 ? 'danger' : 'primary'"
        :class="type === 4 || type === 5 ? 'button_delete' : 'button_function'"
        @click="saveUser"
        >{{ type === 4 || type === 5 ? '删除' : '保存' }}</el-button
      >
    </div>
  </div>
</template>

<style scoped></style>
